<template>
  <!-- 弹窗-上传 -->
  <el-dialog class="c_dialog" v-el-drag-dialog :visible.sync="isOpen"
    @close="dialogClose" :width="width" @open="openHandle">
    <div class="upload-body">
      <el-upload ref="upload" drag :action="action" :name="field" :multiple="multiple"
      :accept="accept" :limit="limit" :data="params" :auto-upload="autoUpload"
      :before-upload="beforeUpload" :on-success="successUpload" :on-error="errorUpload"
      :with-credentials="isCookie" :headers="headers"
      :on-exceed="exceed" :on-preview="preview" :on-remove="remove">
        <slot>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="upload-tip" slot="tip">
            <slot name="tip" :tip="tip">{{ tip }}</slot>
          </div>
        </slot>
      </el-upload>
      <!-- 自定义插槽 -->
      <slot name="other"></slot>
    </div>
    <span slot="footer" v-if="!autoUpload">
      <el-button size="small" @click="dialogClose">取 消</el-button>
      <el-button type="success" size="small" :loading="loading" @click="loading=true;$refs.upload.submit()">开始上传</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { Message, Upload as ElUpload, Dialog as ElDialog, Button } from 'element-ui'
// import dragDialog from '@/directives/el-drag-dialog/drag'
export default {
  name: 'cUpload',
  props: {
    open: { // 是否打开
      type: Boolean,
      default: false
    },
    action: { // 上传地址
      type: String,
      required: true
    },
    field: { // 上传字段key
      type: String,
      default: 'image'
    },
    params: Object, // 额外参数
    size: {
      type: Number,
      default: 1024 * 1024 // 单位KB - byte
    },
    limit: Number, // 文件上传数
    accept: { // 文件类型
      type: String,
      default: 'image/*' // 默认图片
    },
    tip: { // 提示
      type: String,
      default: '只能上传图片，且不超过1MB' // 默认提示
    },
    width: { // 宽度
      type: String,
      default: '400px'
    },
    autoUpload: { // 是否在选取文件后立即进行上传
      type: Boolean,
      default: true
    },
    multiple: Boolean, // 是否支持多选文件
    isCookie: Boolean, // 是否携带Cookie
    headers: Object // 设置上传的请求头部
  },
  data() {
    return {
      loading: false
    }
  },
  computed: {
    // 弹窗-打开
    isOpen: {
      get() { return this.open },
      set(val) { this.$emit('update:open', val) }
    }
  },
  components: { ElDialog, ElUpload, ElButton: Button },
  created() {
  },
  methods: {
    // 打开窗口
    openHandle() {
      const domDialog = this.$refs.dialog.$el.querySelector('.el-dialog')
      domDialog.style.top = 0
      domDialog.style.left = 0
      domDialog.style.marginBottom = 0
    },
    // 上传前-钩子
    beforeUpload(file) {
      if (file.size >= this.size) {
        Message.error('上传文件: 大小超过限制')
        return false
      }
      return new Promise((resolve, reject) => {
        this.$emit('uploadEvent', { type: 'before', data: { file }},
          bool => { return bool ? resolve() : reject() })
      })
    },
    // 上传成功
    successUpload(response, file, fileList) {
      this.$emit('uploadEvent', { type: 'success', data: { response, file, fileList }})
    },
    // 上传失败
    errorUpload(err, file, fileList) {
      this.closeLoading()
      this.$emit('uploadEvent', { type: 'error', data: { err, file, fileList }})
    },
    // 文件超出个数限制时的钩子
    exceed(files, fileList) {
      this.$emit('uploadEvent', { type: 'exceed', data: { files, fileList }})
    },
    // 点击文件列表中已上传的文件时的钩子
    preview(file) {
      this.$emit('uploadEvent', { type: 'preview', data: { file }})
    },
    // 文件列表移除文件时的钩子
    remove(file, fileList) {
      this.$emit('uploadEvent', { type: 'remove', data: { file, fileList }})
    },
    // 关闭-弹窗回调
    dialogClose() {
      this.isOpen = false
      this.clearFiles()
      this.closeLoading()
    },
    // ========= 方法 =========
    // 清除文件
    clearFiles() {
      this.$refs.upload.clearFiles()
    },
    // 关闭-上传加载状态
    closeLoading(bool = false) {
      this.loading = bool
    },
    // 打开-选择文件
    openFile() {
      this.$nextTick(() => {
        this.$refs.upload.$refs['upload-inner'].handleClick()
      })
    }
  },
  filters: {

  }
  // directives: {dragDialog}
}
</script>
<style lang="scss" scoped>
.upload-body{
  // text-align: center;
  .upload-tip{
    text-align: center;
    color: #c71212;
  }
}
.c_dialog{
  ::v-deep .el-dialog{
    position: relative;
    left: 0;
    top: 0;
    transform: none !important;
  }
}

</style>
